<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :lg="6" :xs="24">
        <div
          class="head-container"
          style="margin-bottom: 10px; padding-left: 60px"
        >
          <span
            style="
              font-family: 'Arial Normal', 'Arial', serif;
              font-weight: bold;
              font-size: 20px;
              letter-spacing: normal;
              line-height: normal;
              font-style: normal;
              color: #333333;
              text-align: center;
            "
            >组织结构</span
          >
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            :default-expanded-keys="[100]"
            node-key="id"
            show-checkbox
            @check="handleCheckChange"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span v-if="data.label">
                <a class="treeTitle" :title="data.label">{{
                  data.label | ellipsis
                }}</a>
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="18" :lg="18" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-if="showSearch"
          label-width="68px"
        >
          <el-form-item prop="title">
            <el-input
              style="cursor: pointer"
              v-model="queryParams.title"
              @focus="openPickActive"
              placeholder="请选择活动名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >统计</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <div>
          <div v-if="showTable" v-for="(item, key) in dataArray" :key="key">
            <div
              style="
                width: 80%;
                padding: 1% 0 1% 0;
                margin-top: 10px;
                background-color: #f5f7fa;
                display: flex;
                justify-content: space-between;
              "
            >
              <div class="" style="margin-left: 3%">
                {{ item.ancestorNames }}
              </div>
              <div
                class=""
                style="
                  flex-shrink: 0;
                  justify-content: flex-end;
                  margin-left: 10%;
                "
              >
                <span style="font-weight: bold">参与人数</span>
                <el-link
                  style="margin-left: 50px; margin-right: 20px"
                  type="primary"
                  :underline="false"
                  @click="tableClickHandler(item.ancestorNames)"
                >
                  <span style="font-size: medium; font-weight: bold">{{
                    item.examineUserCount
                  }}</span>
                </el-link>
              </div>
              <!-- <span style="margin-left: 3%">{{ item.ancestorNames }}</span>
              <span style="margin-left: 30%; font-weight: bold"
                >参与人数??</span
              >
              <el-link
                style="margin-left: 10%"
                type="primary"
                :underline="false"
                @click="tableClickHandler(item.ancestorNames)"
              >
                <span style="font-size: medium; font-weight: bold">{{
                  item.examineUserCount
                }}</span>
              </el-link> -->
            </div>
          </div>
        </div>
        <el-empty
          v-if="!showTable"
          description="请选择部门和活动进行统计"
        ></el-empty>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="open" title="活动列表" width="800px">
      <el-form
        :model="pickParams"
        ref="pickParams"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <el-form-item prop="title">
          <el-input
            v-model="pickParams.title"
            placeholder="请输入活动标题"
            clearable
            @keyup.enter.native="handlePickQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handlePickQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetPickQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-table
        v-loading="pickLoading"
        ref="singleTable"
        :data="pickData"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%"
      >
        <el-table-column type="index" width="50">
          <template slot-scope="scope">
            <el-radio v-model="currentData" :label="scope.row"
              ><i></i
            ></el-radio>
          </template>
        </el-table-column>
        <el-table-column
          property="title"
          label="活动名称"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          property="examineUserName"
          label="创建人"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column property="createTime" align="center" label="创建时间">
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pickParams.pageNum"
        :limit.sync="pickParams.pageSize"
        @pagination="getActivePick"
      />
      <div style="text-align: center; margin-top: 40px">
        <el-button type="primary" @click="pickSubmit">确 定</el-button>
        <el-button @click="pickCancel">取 消</el-button>
      </div>
    </el-dialog>
    <statistics-dialog ref="statisticsDialogRef"></statistics-dialog>
  </div>
</template>

<script>
import { treeselect,treeselectAll } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import quarter from "@/views/tool/quarter";
import halfyear from "@/views/tool/halfyear";
import { getActiveStatistic } from "@/api/examine/user/api";
import { listPick } from "@/api/examine/active/api";
import statisticsDialog from "@/views/examine/statisticsDialog";

export default {
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    },
  },
  name: "statistics",
  dicts: ["sys_normal_disable", "sys_user_sex", "examine_cycle"],
  components: {
    Treeselect,
    quarter,
    halfyear,
    statisticsDialog,
  },
  data() {
    return {
      pickLoading: false,
      pickActive: "",
      dataArray: [],
      pickData: [],
      cycleVal: "",
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 用户表格数据
      statData: [],
      // 部门树选项
      deptOptions: [],
      // 是否显示弹出层
      open: false,
      userTipOptions: [],
      currentData: {},
      // 部门名称
      deptName: undefined,
      showTable: false,
      // 表单参数
      form: {},
      // 总条数
      total: 0,
      defaultProps: {
        children: "children",
        label: "label",
      },
      examineYearOptions: {
        disabledDate: (time) => {
          const date = new Date();
          const year = date.getFullYear();
          const timeYear = time.getFullYear();
          return year > timeYear + 3;
        },
      },
      deptPickList: [],
      // 查询参数
      queryParams: {
        deptSearchStr: "",
        examineId: undefined,
        title: "",
      },
      pickParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        missionStatus: 1,
        examineStatus: 2,
        examineType: 3,
        approveStatus: 1,
      },
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getList();
    this.getTreeselect();
  },
  mounted() {},
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      getActiveStatistic(this.queryParams).then((resp) => {
        var countList = resp.rows.filter((f) => f.examineUserCount > 0);
        if (countList) {
          countList.forEach((f) => {
            const index = resp.rows.findIndex(
              (i) =>
                i.ancestorNames === f.ancestorNames && i.examineUserCount < 1
            );
            resp.rows.splice(index, 1);
          });
        }
        this.dataArray = resp.rows;
        this.loading = false;
        if (this.deptPickList.length > 0 && this.queryParams.title) {
          this.showTable = true;
        } else {
          this.showTable = false;
        }
      });
    },
    getActivePick() {
      this.pickLoading = true;
      listPick(this.pickParams)
        .then((resp) => {
          this.pickData = resp.rows;
          this.total = resp.total;
        })
        .finally(() => {
          this.pickLoading = false;
        });
    },
    openPickActive() {
      this.open = true;
      this.getActivePick();
      if (this.currentData) {
        this.$nextTick(() => {
          this.$refs.singleTable.setCurrentRow(this.currentData);
        });
      }
    },
    handlePickQuery() {
      this.getActivePick();
    },
    tableClickHandler(ancestorNames) {
      this.queryParams.ancestorNames = ancestorNames;
      this.queryParams.isSubmitted = 1;
      this.queryParams.examineType = 3;
      this.queryParams.id = this.currentData.id;
      this.$refs.statisticsDialogRef.dialogOpen(this.queryParams);
      // this.$router.push({path: '/active/statisticsTable', query: {params: this.queryParams}})
    },
    handleCurrentChange(val) {
      this.currentData = val;
    },
    pickCancel() {
      this.resetForm("pickParams");
      this.open = false;
    },
    pickSubmit() {
      this.queryParams.title = this.currentData.title;
      this.queryParams.examineId = this.currentData.id;
      this.open = false;
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselectAll().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getCycleValue(data) {
      this.cycleVal = data;
    },
    // 表单重置
    reset() {
      this.form = {
        examineCycle: undefined,
        pickCycle: undefined,
      };
      this.cycleVal = "";
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.deptPickList) {
        this.queryParams.deptSearchStr = this.deptPickList
          .map((m) => m.id)
          .join(",");
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.$refs.tree.setCheckedKeys([]);
      this.deptPickList = [];
      this.handleQuery();
    },
    resetPickQuery() {
      this.resetForm("pickParams");
      this.getActivePick();
    },
    // 节点单击事件
    handleCheckChange() {
      //获取所有选中的节点id
      this.tenantIdMenus = this.$refs.tree.getCheckedNodes();
      this.deptPickList = this.tenantIdMenus;
    },
    // 季度选择回调
    getQuarter(val) {
      this.queryParams.pickCycle = val;
    },
    // 半年度选择回调
    getHalfyear(val) {
      this.queryParams.pickCycle = val;
    },
  },
};
</script>
<style lang="scss" scoped></style>
